<div class="page-container" v-cloak>
    <el-card>
        <template #header>
            <div class="breadcrumb" style=" overflow: hidden;">
                <el-breadcrumb separator="/" style=" float: left;  ">
                    <el-breadcrumb-item><a href="{:url('admin/coupon/index')}">优惠卷列表</a></el-breadcrumb-item>
                    <el-breadcrumb-item>{$title}</el-breadcrumb-item>
                </el-breadcrumb>
                <el-breadcrumb separator="/" style=" float: right;  ">
                    <el-button type="primary" @click="refresh()">刷新</el-button>
                </el-breadcrumb>
            </div>
        </template>
        <div>
            <el-form label-width="100px">
                <el-form-item label="所属门店">
                    <div>
                        <el-radio-group v-model="form.store_id">
                            <el-radio
                                    v-for="(item, index) in storeOptions"
                                    :key="item.store_id"
                                    :label="item.store_id"
                                    :disabled="item.disabled"
                                    @change="storeChange(item.store_id)"
                            >{{item.store_name}}
                            </el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item label="可选包厢">
                    <div>
                        <el-checkbox-group v-model="form.roomids">
                            <el-checkbox
                                    v-for="(item, index) in roomOptions"
                                    :key="item.room_id"
                                    :label="item.room_id"
                                    :disabled="item.disabled"
                            >{{item.name}}
                            </el-checkbox>
                        </el-checkbox-group>
                        <div class="form-small">
                            <!--                            <small>不选默认全部包厢</small>-->
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="优惠卷名称">
                    <el-input v-model="form.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="优惠卷类型">
                    <el-radio-group v-model="form.type">
                        <el-radio :label="0">抵扣优惠卷</el-radio>
                        <el-radio :label="1">免费优惠卷</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="优惠卷价格">
                    <div>
                        <el-input v-model="form.price" type="number" style="width: 200px"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="优惠卷面值">
                    <div>
                        <el-input v-model="form.money" type="number" style="width: 200px"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="满减">
                    <div>
                        <el-input v-model="form.condition" type="number" style="width: 200px"></el-input>
                        <div class="form-small">
                            <small>套餐付款满多少可用，为0不限</small>
                        </div>
                    </div>

                </el-form-item>


                <el-form-item label="优惠卷时长">
                    <div>
                        <el-input v-model="form.time" type="number" style="width: 200px"></el-input>
                        <div class="form-small">
                            <small>套餐时长小于该时间可用，为0不限</small>
                        </div>
                    </div>

                </el-form-item>
                <el-form-item label="该时间段可用">
                    <div>
                        <el-input v-model="form.hours_add_time" type="number" style="width: 200px"></el-input>
                        ~
                        <el-input v-model="form.hours_end_time" type="number" style="width: 200px"></el-input>
                        <div class="form-small">
                            <small>在某时段可用,0到0不限</small>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item label="库存张数">
                    <div>
                        <el-input v-model="form.num" type="number" style="width: 200px"></el-input>
                        <div class="form-small">
                            <small>为0时则无法继续领取或购买</small>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="美团兑换ID">
                    <div>
                        <el-input v-model="form.meituan_id" type="number" style="width: 200px"></el-input>
                        <div class="form-small">
                            <small>领取或购买该卷到此时间，直接过期</small>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="抖音兑换ID">
                    <div>
                        <el-input v-model="form.trill_id" type="number" style="width: 200px"></el-input>
                        <div class="form-small">
                            <small>领取或购买该卷到此时间，直接过期</small>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="到期时间">
                    <div>
                        <el-date-picker
                                v-model="form.end_time"
                                type="date"
                                value-format="YYYY-MM-DD"
                                placeholder="到期时间">
                        </el-date-picker>
                        <div class="form-small">
                            <small>领取或购买该卷到此时间，直接过期</small>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="可以直接领取">
                    <el-radio-group v-model="form.receive">
                        <el-radio :label="1">是(展示在福利中心)</el-radio>
                        <el-radio :label="0">否(展示在门店卡卷中心购买)</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="限领限购张数">
                    <div>
                        <el-input v-model="form.user_num" type="number" style="width: 200px"></el-input>
                        <div class="form-small">
                            <small>用户领取数量不小于该值，则无法继续领取或购买,0为不限</small>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="是否展示">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">显示</el-radio>
                        <el-radio :label="0">隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button @click="submitEvent" type="primary">
                        提交
                    </el-button>
                    <el-button @click="goBack" type="warning">
                        返回
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>

</div>
{hcmstag:include file="admin@/components/upload/select-image"}
<script>
    const App = {
        data() {
            return {
                form: {},
                value: [],
                storeOptions: [],
                roomOptions: [], // 用于存储从接口获取的选项数据
                end_time: new Date()
            }
        },
        mounted() {
            this.getInfo()
        },
        computed: {},
        methods: {
            handleChange(value) {
                console.log(value);
            },
            richUpdateEvent(e) {
                console.log('richUpdateEvent', e)
            },
            storeChange(value) {
                console.log(value);

                //获取对应包间
                let store_id = value
                this.httpGet("{:url('admin/room/index/getlists')}/" + store_id, {}).then(res => {
                    if (res.status) {
                        console.log(res)
                        let {roomOptions = {}} = res.data

                        this.roomOptions = roomOptions


                    }
                })

            },

            /**
             * 获取编辑所需信息
             */
            getInfo() {
                let coupon_id = this.getUrlQuery('coupon_id', 0)
                this.httpGet("{:url('admin/coupon/edit')}/" + coupon_id, {}).then(res => {
                    if (res.status) {
                        console.log(res)
                        let {coupon = {}, roomOptions = {}, storeOptions = {}} = res.data
                        this.storeOptions = storeOptions
                        this.roomOptions = roomOptions
                        if (coupon.coupon_id) {

                            this.form = {
                                ...coupon,
                            }
                        }

                    }
                })
            },
            /**
             * 提交信息
             */
            submitEvent() {
                this.httpPost("{:url('admin/coupon/edit')}", {
                    ...this.form,
                }, true).then(res => {
                    if (res.status) {

                        this.$message.success(res.msg)
                        location.href = "{:url('admin/coupon/index')}"
                    }
                })
            },
            refresh() {
                location.replace(location.href);
            },
            goBack() {
                window.history.back();
            }
        }
    }
</script>

<style>
    /*默认输入框宽度*/
    .el-form-item .el-input {
        width: 500px;
    }

</style>
